<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/index.css" rel="stylesheet">
    <title>去哪儿网</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <link href="css/public.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/login.js"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>

<body>
    <div id="app">
        <login @user-loaded="handleUserLoaded" ref="loginComponent">
            <template v-slot:nologin>
                <div class="header-login">
                    <a href="javascript:void(0)"><img src="images/qq.png" title="QQ登录" /></a>
                    <a href="javascript:void(0)"><img src="images/wx.png" title="微信登录" /></a>
                    <a class="lar" href="lar.html" style="font-weight: bold;">登录</a>
                    <span>|</span>
                    <a class="lar" href="lar.html" style="font-weight: bold;">注册</a>
                </div>
            </template>
            <template v-slot:logined="user">
                <div class="header-login">
                    <a>打卡</a>
                    <a class="msg" >消息<i class="bi bi-caret-down-fill"></i></a>
                    <a class="per" ><img :src="user.avatar"><i class="bi bi-caret-down-fill"></i></a>
                </div>
                <!--消息下拉菜单-->
                <div class="tips msg-tips" >
                    <ul>
                        <li>私信</li>
                        <li>系统通知</li>
                        <li>回复消息</li>
                    </ul>
                </div>
                <!--用户下拉菜单-->
                <div class="tips user-tips" >
                    <ul>
                        <li @click="toWrite"><i class="bi bi-pencil-square"></i>写游记</li>
                        <li><i class="bi bi-question-diamond"></i>我的问答</li>
                        <li><i class="bi bi-star-fill"></i>我的收藏</li>
                        <li><i class="bi bi-gear"></i>设置</li>
                        <li @click="loginout"><i class="bi bi-box-arrow-left"></i>退出</li>
                    </ul>
                </div>
            </template>
        </login>
    </div>

    <script>
        const token = localStorage.getItem('token');
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
        var v = new Vue({
            el: "#app",
            data:{
                user:{}
            },
            methods:{
                toWrite(){
                    window.location.href = 'travelogueDraft.html';
                },
                loginout(){
                    axios.get("/users/loginout").then(res =>{
                        this.$refs.loginComponent.user = null;
                    })
                },
                handleUserLoaded(user) {
                    if (user == null){
                        return
                    }
                    this.user = user;
                },
            }
        })

        const pointer = document.querySelector('.pointer');
        let rad = 0;
        window.onmousemove = (e) => {
            const x = e.clientX;
            const y = e.clientY;

            const mx = e.movementX;
            const my = e.movementY;

            if (Math.abs(mx) + Math.abs(my) < 3) return;
            rad = Math.atan2(mx, -my);
            pointer.style.transform = `translate(${x}px,${y}px) rotate(${rad}rad)`;
        }


        document.addEventListener('DOMContentLoaded', function () {
            let currentIndex = 0; // 当前显示图片的索引
            const images = document.querySelectorAll('.show-image li');
            const navItems = document.querySelectorAll('.show-nav li'); // 获取所有的导航项
            const imagesCount = images.length;
            let slideInterval;

            function startSlider() {
                slideInterval = setInterval(function () {
                    changeImage((currentIndex + 1) % imagesCount); // 使用changeImage函数来切换图片
                }, 3000); // 时间间隔为3000毫秒（即3秒）
            }

            function changeImage(nextIndex) {
                // 使当前的图片淡出
                images[currentIndex].style.opacity = '0';
                navItems[currentIndex].classList.remove('active-nav-item'); // 移除当前导航项的高亮

                // 更新索引
                currentIndex = nextIndex;

                // 使下一个图片淡入, 并高亮新的导航项
                images[currentIndex].style.opacity = '1';
                navItems[currentIndex].classList.add('active-nav-item'); // 添加高亮
            }

            // 初始化轮播
            startSlider();

            // 给每个导航项添加点击事件监听器
            navItems.forEach((item, index) => {
                item.addEventListener('click', () => {
                    clearInterval(slideInterval); // 清除当前定时器
                    changeImage(index);
                    startSlider(); // 重新启动轮播
                });
            });
        });

        document.querySelectorAll('.search-tab li').forEach(function (item) {
            item.addEventListener('click', function () {
                // 移除当前激活项的active类
                document.querySelector('.search-tab li.active')?.classList.remove('active');
                // 为点击的项添加active类
                this.classList.add('active');
            });
        });

        function scrollToSection(id) {
            const targetElement = document.getElementById(id);
            const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
            const startPosition = window.pageYOffset;
            const distance = targetPosition - startPosition;
            const duration = 2000; // 动画持续时间（毫秒）

            let startTime = null;

            function animation(currentTime) {
                if (startTime === null) startTime = currentTime;
                const timeElapsed = currentTime - startTime;
                const run = ease(timeElapsed, startPosition, distance, duration);
                window.scrollTo(0, run);
                if (timeElapsed < duration) requestAnimationFrame(animation);
            }

            function ease(t, b, c, d) {
                t /= d / 2;
                if (t < 1) return c / 2 * t * t + b;
                t--;
                return -c / 2 * (t * (t - 2) - 1) + b;
            }

            requestAnimationFrame(animation);
        }
    </script>

</body>

</html>